<!-- 首页 -->
<template>
  <!-- 首页轮播图 -->
  <van-swipe class="swiper-carousel" lazy-render :autoplay="3000" :show-indicators="false">
    <van-swipe-item v-for="(image, index) in homeImgs" :key="index">
      <img class="lazy_img" :src="image.imgUrl" />
    </van-swipe-item>
  </van-swipe>
  <!-- 活动图 -->
  <section class="home-tags">
    <ul class="tags-content">
      <a tag="li" class="tags-item">
        <van-icon class="tags-icon" name="gift-o" style="background-color: rgb(243, 5, 5);"></van-icon>
        <span class="item-text">限时秒杀</span>
      </a>
      <a tag="li" class="tags-item">
        <van-icon class="tags-icon" name="fire" style="background-color: rgb(148, 12, 211);"></van-icon>
        <span class="item-text">断码清仓</span>
      </a>
      <a tag="li" class="tags-item">
        <van-icon class="tags-icon" name="friends-o" style="background-color: rgb(12, 115, 211);"></van-icon>
        <span class="item-text">百亿补贴</span>
      </a>
      <a tag="li" class="tags-item">
        <van-icon class="tags-icon" name="gold-coin" style="background-color: rgb(24, 214, 81);"></van-icon>
        <span class="item-text">签到领卷</span>
      </a>
      <a tag="li" class="tags-item">
        <van-icon class="tags-icon" name="vip-card-o" style="background-color: rgb(240, 224, 8);"></van-icon>
        <span class="item-text">会员专区</span>
      </a>
    </ul>
  </section>
  <section class="spike-area">
    <ul class="spike-top">
      <router-link class="top-left" to="/details" tag="li">
        <div class="item-top">
          <span class="item-title">限时秒杀</span>
          <div class="time-text">
            <span class="eight-time">10点场</span>
            <van-count-down :time="timeData" class="time-count-down">
              <template v-slot="timeData">
                <span class="time-item" v-if="timeData.hours < 10">{{
                  "0" + timeData.hours
                }}</span>
                <span class="time-item" v-else>{{ timeData.hours }}</span>
                <i class="tow-point">:</i>
                <span class="time-item" v-if="timeData.minutes < 10">{{
                  "0" + timeData.minutes
                }}</span>
                <span class="time-item" v-else>{{ timeData.minutes }}</span>
                <i class="tow-point">:</i>
                <span class="time-item" v-if="timeData.seconds < 10">{{
                  "0" + timeData.seconds
                }}</span>
                <span class="time-item" v-else>{{ timeData.seconds }}</span>
              </template>
            </van-count-down>
          </div>
        </div>
        <div class="item-info">
          <div class="item-content">
            <img src="src/assets/home/home4.jpg" style="width: 60px;height: 80px;" />
            <span class="new-price">¥1.8</span>
            <span class="old-price">¥3.6</span>
          </div>
          <div class="item-content">
            <img src="src/assets/home/home5.jpg" style="width: 70px;height: 80px;" />
            <span class="new-price">¥2.6</span>
            <span class="old-price">¥4.8</span>
          </div>
          <div class="item-content">
            <img src="src/assets/home/home6.jpg" style="width: 70px;height: 80px;" />
            <span class="new-price">¥2.9</span>
            <span class="old-price">¥3.9</span>
          </div>
        </div>
      </router-link>
      <router-link class="top-right" to="/details" tag="li">
        <div class="right-header">
          <span class="cat-spike-text">发现好货</span>
          <span class="tag-text">品质好物</span>
        </div>
        <span class="good-item">好吃不贵</span>
        <div class="item-imgs">
          <img src="src/assets/home/home7.jpg" />
          <img src="src/assets/home/home8.jpg" />
        </div>
      </router-link>
    </ul>

    <ul class="spike-center">
      <router-link class="center-item" to="/details" tag="li">
        <span class="center-title">特价蔬菜</span>
        <span class="center-descr">0.9元抢购</span>
        <img src="src/assets/home/home9.jpg" />
      </router-link>
      <router-link class="center-item" to="/details" tag="li">
        <span class="center-title">特价水果</span>
        <span class="center-descr" style="color: #dd3749">1.8元抢购</span>
        <img src="src/assets/home/home7.jpg" />
      </router-link>
      <router-link class="center-item" to="/details" tag="li">
        <span class="center-title">新品上市</span>
        <span class="center-descr" style="#FC6380">最新商品</span>
        <img src="src/assets/home/home10.jpg" />
      </router-link>
      <router-link class="center-item" to="/details" tag="li">
        <span class="center-title">满减商品</span>
        <span class="center-descr" style="color: #91c95b">满10减2</span>
        <img src="src/assets/home/home7.jpg" />
      </router-link>
    </ul>
  </section>
  <!-- 商品展示 -->
  <div class="content-tabs">
    <van-tabs :swipe-threshold="5" title-inactive-color="#3a3a3a" title-active-color="#D8182D" background="transparent"
      animated>
      <!-- 遍历商品类别 -->
      <van-tab v-for="(list, index) in tabArray" :title="list.describe" :name="list.type" :key="index">
        <template #title>
          <div class="slot-title">
            <b class="tab-title">{{ list.title }}</b>
            <span class="tab-name">{{ list.name }}</span>
          </div>
        </template>
        <!-- 遍历不同商品类别中的商品 -->
        <section class="goods-box search-wrap">
          <ul class="goods-content">
            <li v-for="(item, index) in list.list" :key="index">
              <router-link class="goods-img" tag="div" to="/details">
                <img :src="item.img" />
              </router-link>
              <div class="goods-layout">
                <div class="goods-title">{{ item.productName }}</div>
                <span class="goods-div">{{ item.title }}</span>
                <div class="goods-desc">
                  <span class="goods-price">
                    <i>{{ item.productCnyPrice }}元/kg</i>
                  </span>
                  <span class="add-icon">
                    +
                  </span>
                </div>
              </div>
            </li>
          </ul>
        </section>
      </van-tab>
    </van-tabs>
  </div>
  <div style="height: 100px;"></div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
// 轮播图数据
const homeImgs = reactive([
  {
    id: 1,
    imgUrl: 'src/assets/home/home1.jpg'
  }, {
    id: 2,
    imgUrl: 'src/assets/home/home2.jpg'
  }, {
    id: 3,
    imgUrl: 'src/assets/home/home3.jpg'
  }
]);
// 时间
const timeData = ref(36000000);
// 商品展示数据
const tabArray = reactive([
  {
    id: 1,
    describe: '',
    type: '',
    title: '热卖',
    name: '猜你喜欢',
    list: [
      {
        img: 'src/assets/home/home4.jpg',
        productName: '苹果',
        title: '精品苹果',
        productCnyPrice: '6.99'
      }, {
        img: 'src/assets/home/home5.jpg',
        productName: '西瓜',
        title: '精品西瓜',
        productCnyPrice: '1.66'
      }, {
        img: 'src/assets/home/home10.jpg',
        productName: '西兰花',
        title: '精品西兰花',
        productCnyPrice: '3.66'
      }, {
        img: 'src/assets/home/home11.jpg',
        productName: '橘子',
        title: '精品橘子',
        productCnyPrice: '2.88'
      },
    ]
  }, {
    id: 2,
    describe: '',
    type: '',
    title: '水果',
    name: '猜你喜欢',
    list: [
      {
        img: 'src/assets/home/home6.jpg',
        productName: '葡萄',
        title: '精品葡萄',
        productCnyPrice: '1.88'
      }, {
        img: 'src/assets/home/home7.jpg',
        productName: '菠萝',
        title: '精品菠萝',
        productCnyPrice: '2.88'
      }, {
        img: 'src/assets/home/home8.jpg',
        productName: '栗子',
        title: '精品栗子',
        productCnyPrice: '1.88'
      }, {
        img: 'src/assets/home/home13.jpg',
        productName: '石榴',
        title: '精品石榴',
        productCnyPrice: '6.88'
      },
    ]
  }, {
    id: 3,
    describe: '',
    type: '',
    title: '蔬菜',
    name: '猜你喜欢',
    list: [
      {
        img: 'src/assets/home/home9.jpg',
        productName: '西红柿',
        title: '精品西红柿',
        productCnyPrice: '0.99'
      }, {
        img: 'src/assets/home/home10.jpg',
        productName: '西兰花',
        title: '精品西兰花',
        productCnyPrice: '1.99'
      }, {
        img: 'src/assets/home/home15.jpg',
        productName: '萝卜',
        title: '精品萝卜',
        productCnyPrice: '0.99'
      }, {
        img: 'src/assets/home/home16.jpg',
        productName: '胡萝卜',
        title: '精品胡萝卜',
        productCnyPrice: '0.99'
      },
    ]
  }, {
    id: 4,
    describe: '',
    type: '',
    title: '秒杀',
    name: '猜你喜欢',
    list: [
      {
        img: 'src/assets/home/home11.jpg',
        productName: '橘子',
        title: '精品橘子',
        productCnyPrice: '1.66'
      }, {
        img: 'src/assets/home/home12.jpg',
        productName: '樱桃',
        title: '精品樱桃',
        productCnyPrice: '3.66'
      }, {
        img: 'src/assets/home/home13.jpg',
        productName: '石榴',
        title: '精品石榴',
        productCnyPrice: '2.66'
      }, {
        img: 'src/assets/home/home14.jpg',
        productName: '香蕉',
        title: '精品香蕉',
        productCnyPrice: '1.66'
      },
    ]
  }, {
    id: 5,
    describe: '',
    type: '',
    title: '特惠',
    name: '猜你喜欢',
    list: [
      {
        img: 'src/assets/home/home9.jpg',
        productName: '西红柿',
        title: '精品西红柿',
        productCnyPrice: '0.9'
      }, {
        img: 'src/assets/home/home10.jpg',
        productName: '西兰花',
        title: '精品西兰花',
        productCnyPrice: '0.99'
      }, {
        img: 'src/assets/home/home11.jpg',
        productName: '橘子',
        title: '精品橘子',
        productCnyPrice: '2.88'
      }, {
        img: 'src/assets/home/home12.jpg',
        productName: '樱桃',
        title: '精品樱桃',
        productCnyPrice: '3.66'
      },
    ]
  }
]);
</script>
<style scoped lang="scss">
.swiper-carousel {
  padding-bottom: 10px;

  .lazy_img {
    width: 100%;
    height: 250px;
  }
}

.home-tags {
  margin-top: 23px;

  .tags-content {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .tags-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .tags-icon {
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 50%;
      }

      .item-text {
        padding-top: 5px;
        font-size: 11px;
        color: #3a3a3a;
      }
    }
  }
}

.spike-area {
  margin: 12px;
  padding-top: 5px;
  border-radius: 4px;
  background-color: white;

  .spike-top {
    display: flex;
    justify-content: space-between;
    align-items: stretch;

    .top-left {
      padding: 12px;

      .item-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item-title {
          font-size: 14px;
          color: #3a3a3a;
          padding-right: 5px;
          font-weight: 600;
        }

        .time-text {
          border: 1px solid #ccc;
          width: 110px;
          height: 18px;
          line-height: 18px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .eight-time {
            font-size: 11px;
            color: white;
            text-align: center;
            width: 42px;
            background-color: #d8182d;
          }

          .time-count-down {
            flex: 1;
            font-size: 9px;
            color: #dd3749;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }

      .item-info {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-top: 4px;
          padding: 0 2px;

          .new-price {
            font-size: 11px;
            color: #d8182d;
            font-weight: 600;
          }

          .old-price {
            font-size: 9px;
            color: #949497;
            text-decoration: line-through;
          }
        }
      }
    }

    .top-right {
      background-color: white;
      font-size: 11px;
      padding: 12px;
      border-radius: 4px;
      flex: 1;

      .right-header {
        .cat-spike-text {
          font-size: 14px;
          color: #3a3a3a;
          font-weight: 600;
        }

        .tag-text {
          border: 1px solid #d8182d;
          display: inline-block;
          text-align: center;
          margin-left: 7px;
          border-radius: 2px;
          color: #d8182d;
          width: 64px;
        }
      }

      .good-item {
        color: #949497;
        font-size: 11px;
      }

      .item-imgs {
        display: flex;
        justify-content: space-between;
        align-items: center;

        img {
          width: 63px;
          height: 63px;
        }
      }
    }
  }

  .spike-center {
    padding-top: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .center-item {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .center-title {
        font-size: 14px;
        color: #3a3a3a;
        font-weight: 600;
      }

      .center-descr {
        font-size: 11px;
        color: #ff9351;
      }

      img {
        width: 70px;
        height: 70px;
      }
    }
  }

  .spike-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .bottom-left {
      padding: 12px;
      display: flex;
      flex-direction: column;

      .bottom-left-header {
        .big-buy {
          font-size: 14px;
          color: #3a3a3a;
          font-weight: 600;
        }

        .goods-name {
          width: 66px;
          height: 18px;
          display: inline-block;
          border-radius: 2px;
          margin-left: 8px;
          text-align: center;
          border: 1px solid #d8182d;
          font-size: 11px;
          color: #dd3749;

          .svg-icon {
            width: 4px;
            height: 7px;
          }
        }

        .addColor {
          color: #dbbaff;
          border: 1px solid #dbbaff;
        }
      }

      .belive-big {
        font-size: 11px;
        color: #949497;
      }

      .bottom-images {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
    }
  }
}

.content-tabs {
  padding-top: 10px;

  .slot-title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .tab-title {
      font-size: 14px;
      font-weight: 600;
      font-size: 17px;
      height: 24px;
      display: inline-block;
      width: 40px;
      line-height: 22px;
    }

    .tab-name {
      line-height: 16px;
      font-size: 10px;
      display: inline-block;
    }
  }

  .goods-box {
    padding: 10px 16px;

    .good-things {
      font-size: 18px;
      color: #d8182d;
      font-weight: 600;
    }

    .goods-content {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      li {
        display: inline-block;
        width: 165px;
        margin-top: 10px;
        border-radius: 8px;
        background-color: white;
        box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);

        img {
          width: 100%;
        }
      }

      li:nth-of-type(even) {
        padding-right: 0;
      }

      .goods-img {
        img {
          width: 165px;
          height: 196px;
          border-radius: 8px 8px 0 0;
        }
      }

      .goods-layout {
        width: 165px;
        padding: 0 10px;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;

        .goods-title {
          color: #3a3a3a;
          font-size: 14px;
          font-weight: 600;
        }

        .goods-div {
          color: #949497;
          font-size: 11px;
        }

        .goods-desc {
          background-color: #fff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 10px;

          .goods-price {
            padding-top: 5px;
            font-size: 14px;
            color: #d8182d;
            display: flex;
            justify-content: center;
            align-items: center;

            .force-value {
              margin-left: 7px;
              color: white;
              border-radius: 20px 20px;
              background-color: #d8182d;
              display: inline-block;
              font-size: 7px;
              line-height: 17px;
              text-align: center;
              width: 42px;
              height: 17px;
            }
          }

          .add-icon {
            height: 20px;
            width: 20px;
            background: red;
            font-size: 20px;
            color: #fff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-right: 10%;
          }
        }
      }
    }
  }
}
</style>
